<template>
  <div class="app">
    <div class="title">各项农产品近6年销量统计</div>
    <div class="top">
      <div id="myChart1" style="width: 800px; height: 500px"></div>
    </div>
    <!-- <div class="bottom">
      <div
        id="myChart2"
        style="width: 500px; height: 350px; margin-top: 50px"
      ></div>
      <div
        id="myChart4"
        style="width: 400px; height: 300px; margin-top: 50px"
      ></div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
// import 'echarts-gl';
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine1();
    // this.drawLine3();
    //  this.drawLine4();
    //   this.drawLine2();
    // setInterval(()=>{
    // },2000);
    //  setInterval(()=>{
    // },2000)
  },
  methods: {
    drawLine1() {
      var chartDom = document.getElementById("myChart1");
      var myChart = echarts.init(chartDom);
      var option;

      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: [
              ["product", "2012", "2013", "2014", "2015", "2016", "2018"],
              ["龙眼", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["西红柿", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["哈密瓜", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["紫薯", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: {
                focus: "self",
              },
              label: {
                formatter: "{b}: {@2012} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2012",
                tooltip: "2012",
              },
            },
          ],
        };
        myChart.on("updateAxisPointer", function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });
        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    },
    drawLine2() {},
    drawLine3() {},
    drawLine4() {},
  },
};
</script>
<style>
.app {
  padding: 20px;
}
.top {
  display: flex;
  justify-content: center;
  align-content: center;

  margin-top: 60px;
}
.bottom {
  display: flex;
  justify-content: space-around;
  align-content: center;
  /* margin-top: 10px; */
}
.title {
  margin-top: 20px;
  display: flex;
  font-size: 29px;
  color: red;
  justify-content: center;
}
</style>